<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<link rel="shortcut icon" href="./res/img/hr_ico.ico" />
		<link rel="stylesheet" type="text/css" href="./res/css/bootstrap.css">
		<style type="text/css">
			#search{
				width: 100%;
			}
			
			#title{
				text-align: center;
			}
			
			form{
				text-align: center;
			}
			
			/*薪资*/
			.tian{
				height: 30px;
				width: 100%;
				border: 0px;
			}
			
			.ku{
				text-align: left;
			}
			
			/*.ku td:last-of-type{
				width: 20%;
			}*/
			
			tr td button{
				width: 100%;
				/*height: 100%;*/
				border: 0px !important;
				border-radius: 0px !important;
			}
			
			tr td:nth-of-type(3){
				padding: 0px !important;
			}
		</style>
	</head>

	<body>
		<div id="title">
			<h1>菜单库</h1>
		</div>
		
		<p id="search">
			<form class="form-inline">
			  <div class="form-group">
			    <label for="food">菜名</label>
			    <input type="text" class="form-control" id="food" placeholder="菜名">
			  </div>
			  <button type="submit" class="btn btn-primary">查询</button>
			</form>
		</p>

		<div class="table-responsive">
			<table class="table table-bordered table-hover table-condensed table-striped ku">
				<tr>
					<th>编号</th>
					<th>菜名</th>
					<th>价格</th>
					<th>详情</th>
					<th>操作</th>
				</tr>
				<#list menus as menu>
				<tr>
					<th>${menu.cid}</th>
					<th>${menu.cName}</th>
					<th>${menu.cPrice}</th>
					<th>${menu.picture!}</th>
					<th>${menu.remark!}</th>
				</tr>
				</#list>
			</table>
		</div>
		  
		  
		<div class="form-group">
		    <div class="col-sm-offset-5 col-sm-2">
		      <a class="btn btn-primary col-sm-12" href="">新增菜品</a>
		    </div>
		</div>
		
		<script type="text/javascript" src="./res/js/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="./res/js/bootstrap.js" ></script>
		<script type="text/javascript">
			$(function () {
			  $('[data-toggle="popover"]').popover();
			})
		</script>
	</body>

</html>